<script setup>
import { reactive, ref, onMounted } from 'vue'
import { resetForm, objCoppy, myConfrim } from '@/utils'
import { getCollageListApi } from '@/api/major'
import { getMajorListApi, addClassApi, getListApi, editClassApi, deleteClassApi, getClassByIdApi } from '@/api/classes'


// 搜索表单内容
const searchModel = reactive({
    className: '',
    majorName: '',
    collageName: '',
    currentPage: 1,
    pageSize: 10,
    total: 0
})
// 弹框属性
const addDialog = reactive({
    title: '',
    width: 600,
    height: 260,
    visible: false
})
// 新增或者编辑表单绑定数据
const addModel = reactive({
    type: '', // 0 新增 1 编辑
    classId: '',
    majorId: '',
    collageId: '',
    className: '',
    classYear: '',
    orderNum: ''
})
// 表单校验规则
const rules = {
    collageId: [{
        trigger: 'blur',
        required: true,
        message: '请选择学院'
    }],
    majorId: [{
        trigger: 'blur',
        required: true,
        message: '请选择专业'
    }],
    className: [
        {
            trigger: 'blur',
            required: true,
            message: '请输入班级名字'
        }
    ],
    classYear: [
        {
            trigger: 'blur',
            required: true,
            message: '请选择招生年份'
        }
    ],
}
// 学院列表
const collageList = ref([])
// 专业列表
const majorList = ref([])
// 表格高度
const tableHeight = ref(0)
// 表格数据
const tableData = ref([])

onMounted(() => {
    tableHeight.value = window.innerHeight - 220
})


// 获取表格树据
const getList = async () => {
    const res = await getListApi(searchModel)
    tableData.value = res.data.records
    searchModel.total = res.data.total
}

getList()

// 搜索按钮
const searchBtn = () => getList()
// 重置按钮
const resetBtn = () => {
    searchModel.className = ''
    searchModel.majorName = ''
    searchModel.collageName = ''
    searchModel.currentPage = 1
    getList()
}

const addForm = ref(null)
// 新增按钮
const addBtn = async () => {
    // 清空上一次的数据
    resetForm(addForm.value, addModel)
    collageList.value = []
    // 获取学院信息
    const res = await getCollageListApi()
    collageList.value = res.data
    addDialog.title = '新增班级'
    addModel.type = '0'
    addDialog.visible = true
}
// 编辑按钮
const editBtn = async (row) => {
    // 清空上一次的数据
    resetForm(addForm.value, addModel)
    collageList.value = []
    // 通过id获取要编辑的数据复制到表单
    const classes = await getClassByIdApi({
        classId: row.classId
    })
    objCoppy(classes.data, addModel)
    // 设置专业数据
    const majorRes = await getMajorListApi({
        collageId: classes.data.collageId
    })
    // 设置专业数据
    majorList.value = majorRes.data
    // 获取学院信息,不然学院选择框是学院id
    const collageRes = await getCollageListApi()
    collageList.value = collageRes.data
    addDialog.title = '编辑班级'
    addModel.type = '1'
    addDialog.visible = true
}
// 删除按钮
const deleteBtn = async (row) => {
    let confirm = await myConfrim('确定要删除该班级吗?')
    if (confirm) {
        const res = await deleteClassApi({
            classId: row.classId
        })
        ElMessage({
            message: res.msg,
            type: 'success',
        })
        // 刷新列表
        getList()
    }
}
// 弹窗确认
const onConfirm = async () => {
    await addForm.value.validate(async valid => {
        if (valid) {
            let res = null
            if (addModel.type === '0') {
                res = await addClassApi(addModel)
            } else if (addModel.type === '1') {
                res = await editClassApi(addModel)
            }
            if (res) {
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
                getList()
                addDialog.visible = false
            }
        }
    })
}
// 弹窗取消
const onClose = () => addDialog.visible = false
// 选择学院改变事件
const selectChange = async (val) => {
    // 清空上一次的数据
    addModel.majorId = ''
    majorList.value = []
    const res = await getMajorListApi({
        collageId: val
    })
    // 设置专业数据
    majorList.value = res.data
}
// 分页页面大小改变
const sizeChange = (size) => {
    searchModel.pageSize = size
    getList()
}
// 选择页数改变
const currentChange = (page) => {
    searchModel.currentPage = page
    getList()
}
</script>

<template>
    <!-- 搜索 -->
    <el-form :model="searchModel" :inline="true">
        <el-form-item>
            <el-input v-model="searchModel.collageName" placeholder="请输入学院名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input v-model="searchModel.majorName" placeholder="请输入专业名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input v-model="searchModel.className" placeholder="请输入班级名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button icon="Search" @click="searchBtn">搜索</el-button>
            <el-button style="color: #ff7670;" icon="Close" @click="resetBtn">重置</el-button>
            <el-button v-permission="['sys:classList:add']" type="primary" icon="Plus" @click="addBtn">新增</el-button>
        </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :height="tableHeight" :data="tableData" border stripe>
        <el-table-column prop="className" label="班级名称"></el-table-column>
        <el-table-column prop="classYear" label="招生年份"></el-table-column>
        <el-table-column prop="collageName" label="学院名称"></el-table-column>
        <el-table-column prop="majorName" label="专业名称"></el-table-column>
        <el-table-column prop="orderNum" label="序号"></el-table-column>
        <el-table-column v-permission="['sys:classList:edit', 'sys:classList:delete']" fixed="right" label="操作" width="200"
            align="center">
            <template #default="scope">
                <el-button type="primary" size="small" icon="Edit" @click="editBtn(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" icon="Delete" @click="deleteBtn(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="searchModel.currentPage"
        :page-sizes="[10, 20, 40, 80, 100]" :page-size="searchModel.pageSize" layout="total,sizes,prev,pager,next,jumper"
        :total="searchModel.total" background>
    </el-pagination>

    <!-- 弹框 -->
    <el-dialog v-model="addDialog.visible" :width="addDialog.width" :close-on-click-modal="false">
        <template #header>
            <h1>{{ addDialog.title }}</h1>
        </template>
        <div :style="{ height: addDialog.height + 'px' }">
            <el-form :model="addModel" ref="addForm" :rules="rules" label-width="80px">
                <el-form-item prop="collageId" label="所属学院">
                    <el-select style="width: 99%;" v-model="addModel.collageId" placeholder="请选择学院" @change="selectChange">
                        <el-option v-for="item in collageList" :key="item.collageId" :label="item.collageName"
                            :value="item.collageId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="majorId" label="所属专业">
                    <el-select style="width: 99%;" v-model="addModel.majorId" placeholder="请选择专业">
                        <el-option v-for="item in majorList" :key="item.majorId" :label="item.majorName"
                            :value="item.majorId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级名称" prop="className">
                    <el-input v-model="addModel.className" placeholder="请输入班级名称"></el-input>
                </el-form-item>
                <el-form-item label="招生年份" prop="classYear">
                    <el-date-picker style="width: 99%;" value-format="YYYY" v-model="addModel.classYear" type="year"
                        placeholder="请选择招生年份">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="序号">
                    <el-input v-model="addModel.orderNum" placeholder="请输入序号"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onClose">取消</el-button>
                <el-button type="primary" @click="onConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>